<!--  -->
<template>
    <div class='option-main'>
        <span class="text" :class="{isActive:isChoosed}">
            {{content}}<template v-if="number>0">({{number}})</template>
        </span>
        <div class="bottom" v-show="isChoosed"></div>
    </div>
</template>

<script>
export default {
  name: 'top-option',
  // props: ['content', 'number', 'isChoosed'],
  props:
            {
              content: String,
              number: Number,
              isChoosed: Boolean
            },
  data () {
    // 这里存放数据
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
    .option-main {
        position: relative;
        width: px2rem(88);
        height: px2rem(44);
        background-color: #fff;
        .text {
            line-height: px2rem(44);
            font-family: PingFang SC;
            font-size: px2rem(14);
            color: #262626;
            font-weight: 500;
            display: block;
            text-align: center;
        }
        .bottom {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
            width: px2rem(30);
            height: px2rem(4);
            border-radius: px2rem(2);
            background: -webkit-linear-gradient(to right,#60C1F6,#A374E4); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(to right,#60C1F6,#A374E4); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(to right,#60C1F6,#A374E4); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right,#60C1F6,#A374E4); /* 标准的语法 */
        }
        .isActive {
            color: #02A4ED;
        }
    }
</style>
